<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <base data-ice="baseUrl" href="../../">
  <title data-ice="title">components/group-list.js | API</title>
  <link type="text/css" rel="stylesheet" href="css/style.css">
  <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
  <script src="script/prettify/prettify.js"></script>
  <script src="script/manual.js"></script>
<link rel="stylesheet" href="./inject/css/0-vue.css"><link rel="stylesheet" href="./inject/css/0-app.css"><link rel="stylesheet" href="./inject/css/0-esdoc.css"><script src="./inject/script/0-custom.js"></script><meta name="description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="API"><meta property="twitter:description" content="&#x4F01;&#x4E1A;&#x5373;&#x65F6;&#x901A;&#x8BAF;&#x5E73;&#x53F0;"></head>
<body class="layout-container" data-ice="rootContainer">

<header>
  <a href="./">Home</a>
  
  <a href="identifiers.html">Reference</a>
  <a href="source.html">Source</a>
  
  <div class="search-box">
  <span>
    <img src="./image/search.png">
    <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
  </span>
    <ul class="search-result"></ul>
  </div>
<a style="position:relative; top:3px;" href="https://github.com/easysoft/xuanxuan.git"><img width="20px" src="./image/github.png"></a></header>

<nav class="navigation" data-ice="nav"><div>
  <ul>
    
  <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/app-avatar.js~AppAvatar.html">AppAvatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/area-selector.js~AreaSelector.html">AreaSelector</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/avatar.js~Avatar.html">Avatar</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/button.js~Button.html">Button</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/checkbox.js~Checkbox.html">Checkbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/click-outside-wrapper.js~ClickOutsideWrapper.html">ClickOutsideWrapper</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-container.js~DisplayContainer.html">DisplayContainer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/display-layer.js~DisplayLayer.html">DisplayLayer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/group-list.js~GroupList.html">GroupList</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/heading.js~Heading.html">Heading</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/hotkey-input-control.js~HotkeyInputControl.html">HotkeyInputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/icon.js~MDIcon.html">MDIcon</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-cutter.js~ImageCutter.html">ImageCutter</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/image-holder.js~ImageHolder.html">ImageHolder</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/input-control.js~InputControl.html">InputControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/list-item.js~ListItem.html">ListItem</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/pager.js~Pager.html">Pager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio-group.js~RadioGroup.html">RadioGroup</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/radio.js~Radio.html">Radio</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/search-control.js~SearchControl.html">SearchControl</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/select-box.js~Selectbox.html">Selectbox</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/spinner.js~Spinner.html">Spinner</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tab-pane.js~TabPane.html">TabPane</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/components/tabs.js~Tabs.html">Tabs</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showContextMenu">showContextMenu</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayGetRef">displayGetRef</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayHide">displayHide</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayRemove">displayRemove</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displaySetStyle">displaySetStyle</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-displayShow">displayShow</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showImageViewer">showImageViewer</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showMessager">showMessager</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showAlert">showAlert</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showConfirm">showConfirm</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showModal">showModal</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPrompt">showPrompt</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-showPopover">showPopover</a></span></span></li>
</ul>
</div>
</nav>

<div class="content" data-ice="content"><h1 data-ice="title">components/group-list.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import React, {PureComponent} from &apos;react&apos;;
import PropTypes from &apos;prop-types&apos;;
import {classes} from &apos;../utils/html-helper&apos;;
import Icon from &apos;./icon&apos;;
import Heading from &apos;./heading&apos;;
import ListItem from &apos;./list-item&apos;;
import Lang from &apos;../lang&apos;;
import Config from &apos;../config&apos;;

/**
 * GroupList &#x7EC4;&#x4EF6; &#xFF0C;&#x663E;&#x793A;&#x4E00;&#x4E2A;&#x5206;&#x7EC4;&#x5217;&#x8868;
 * @class GroupList
 * @see https://react.docschina.org/docs/components-and-props.html
 * @extends {PureComponent}
 * @example
 * &lt;GroupList /&gt;
 */
export default class GroupList extends PureComponent {
    /**
     * React &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;&#x7C7B;&#x578B;&#x68C0;&#x67E5;
     * @see https://react.docschina.org/docs/typechecking-with-proptypes.html
     * @static
     * @memberof GroupList
     * @return {Object}
     */
    static propTypes = {
        headingCreator: PropTypes.func,
        checkIsGroup: PropTypes.func,
        itemCreator: PropTypes.func,
        onExpandChange: PropTypes.func,
        group: PropTypes.object,
        className: PropTypes.string,
        children: PropTypes.any,
        defaultExpand: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
        toggleWithHeading: PropTypes.bool,
        forceCollapse: PropTypes.bool,
        hideEmptyGroup: PropTypes.bool,
        collapseIcon: PropTypes.string,
        expandIcon: PropTypes.string,
        startPageSize: PropTypes.number,
        morePageSize: PropTypes.number,
        defaultPage: PropTypes.number,
    }

    /**
     * React &#x7EC4;&#x4EF6;&#x9ED8;&#x8BA4;&#x5C5E;&#x6027;
     * @see https://react.docschina.org/docs/react-component.html#defaultprops
     * @type {object}
     * @memberof GroupList
     * @static
     */
    static defaultProps = {
        headingCreator: null,
        itemCreator: null,
        group: null,
        className: null,
        children: null,
        defaultExpand: true,
        toggleWithHeading: true,
        collapseIcon: &apos;chevron-right&apos;,
        expandIcon: &apos;chevron-down&apos;,
        hideEmptyGroup: true,
        checkIsGroup: null,
        onExpandChange: null,
        forceCollapse: false,
        startPageSize: Config.ui[&apos;page.start.size&apos;] || 20,
        morePageSize: Config.ui[&apos;page.more.size&apos;] || 20,
        defaultPage: 1
    }

    /**
     * &#x6E32;&#x67D3;&#x4E00;&#x4E2A;&#x5206;&#x7EC4;&#x5217;&#x8868;
     * @param {Array.&lt;Object&gt;} list &#x5217;&#x8868;&#x9879;&#x914D;&#x7F6E;&#x5217;&#x8868;
     * @param {Object} props &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;
     * @param {number} page &#x9875;&#x7801;
     * @param {Function?} onRequestMore &#x5F53;&#x70B9;&#x51FB;&#x66F4;&#x591A;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
     * @return {ReactNode}
     * @static
     * @memberof GroupList
     */
    static render(list, props, page = 0, onRequestMore = null) {
        const listViews = [];
        props = Object.assign({}, GroupList.defaultProps, props);
        const maxIndex = page ? Math.min(list.length, props.startPageSize + (page &gt; 1 ? (page - 1) * props.morePageSize : 0)) : list.length;
        for (let i = 0; i &lt; maxIndex; ++i) {
            const item = list[i];
            if ((props.checkIsGroup &amp;&amp; props.checkIsGroup(item)) || (!props.checkIsGroup &amp;&amp; (item.type === &apos;group&apos; || item.list))) {
                if (props.hideEmptyGroup &amp;&amp; (!item.list || !item.list.length)) {
                    continue;
                }
                listViews.push(&lt;GroupList
                    key={item.key || item.id || i}
                    group={(props &amp;&amp; props.listConverter) ? props.listConverter(item) : item}
                    itemCreator={props &amp;&amp; props.itemCreator}
                    toggleWithHeading={props &amp;&amp; props.toggleWithHeading}
                    headingCreator={props &amp;&amp; props.headingCreator}
                    defaultExpand={props &amp;&amp; props.defaultExpand}
                    expandIcon={props &amp;&amp; props.expandIcon}
                    collapseIcon={props &amp;&amp; props.collapseIcon}
                    hideEmptyGroup={props &amp;&amp; props.hideEmptyGroup}
                    checkIsGroup={props &amp;&amp; props.checkIsGroup}
                    forceCollapse={props &amp;&amp; props.forceCollapse}
                    onExpandChange={props &amp;&amp; props.onExpandChange}
                    startPageSize={props &amp;&amp; props.startPageSize}
                    morePageSize={props &amp;&amp; props.morePageSize}
                    defaultPage={props &amp;&amp; props.defaultPage}
                /&gt;);
            } else if (props &amp;&amp; props.itemCreator) {
                listViews.push(props.itemCreator(item, i));
            } else {
                listViews.push(&lt;ListItem key={item.key || item.id || i} {...item} /&gt;);
            }
        }
        const notShowCount = list.length - maxIndex;
        if (notShowCount) {
            listViews.push(&lt;ListItem key=&quot;showMore&quot; icon=&quot;chevron-double-down&quot; className=&quot;flex-middle item muted&quot; title={&lt;span className=&quot;title small&quot;&gt;{Lang.format(&apos;common.clickShowMoreFormat&apos;, notShowCount)}&lt;/span&gt;} onClick={onRequestMore} /&gt;);
        }
        return listViews;
    }

    /**
     * React &#x7EC4;&#x4EF6;&#x6784;&#x9020;&#x51FD;&#x6570;&#xFF0C;&#x521B;&#x5EFA;&#x4E00;&#x4E2A; GroupList &#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#xFF0C;&#x4F1A;&#x5728;&#x88C5;&#x914D;&#x4E4B;&#x524D;&#x88AB;&#x8C03;&#x7528;&#x3002;
     * @see https://react.docschina.org/docs/react-component.html#constructor
     * @param {Object?} props &#x7EC4;&#x4EF6;&#x5C5E;&#x6027;&#x5BF9;&#x8C61;
     * @constructor
     */
    constructor(props) {
        super(props);
        let {defaultExpand} = props;
        if (typeof defaultExpand === &apos;function&apos;) {
            defaultExpand = defaultExpand(props.group, this);
        }
        /**
         * React &#x7EC4;&#x4EF6;&#x72B6;&#x6001;&#x5BF9;&#x8C61;
         * @see https://react.docschina.org/docs/state-and-lifecycle.html
         * @type {object}
         */
        this.state = {
            expand: defaultExpand,
            page: props.defaultPage
        };
    }

    /**
     * &#x5207;&#x6362;&#x5C55;&#x5F00;&#x6216;&#x6298;&#x53E0;&#x5206;&#x7EC4;
     * @param {?bool} expand &#x5982;&#x679C;&#x8BBE;&#x7F6E;&#x4E3A; true&#xFF0C;&#x5219;&#x5C55;&#x5F00;&#x5206;&#x7EC4;&#xFF0C;&#x5982;&#x679C;&#x4E3A; false&#xFF0C;&#x5219;&#x6298;&#x53E0;&#x5206;&#x7EC4;&#xFF0C;&#x5426;&#x5219;&#x81EA;&#x52A8;&#x5207;&#x6362;
     * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
     * @memberof GroupList
     * @return {void}
     * @instance
     */
    toggle(expand, callback) {
        if (expand === undefined) {
            expand = !this.state.expand;
        }
        this.setState({expand}, () =&gt; {
            const {onExpandChange, group} = this.props;
            if (onExpandChange) {
                onExpandChange(expand, group);
            }
            if (callback) {
                callback(expand, group);
            }
        });
    }

    /**
     * &#x5C55;&#x5F00;&#x5206;&#x7EC4;
     * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
     * @memberof GroupList
     * @return {void}
     * @instance
     */
    expand(callback) {
        this.toggle(true, callback);
    }

    /**
     * &#x6298;&#x53E0;&#x5206;&#x7EC4;
     * @param {?Function} callback &#x64CD;&#x4F5C;&#x5B8C;&#x6210;&#x65F6;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
     * @memberof GroupList
     * @return {void}
     * @instance
     */
    collapse(callback) {
        this.toggle(false, callback);
    }

    /**
     * &#x5904;&#x7406;&#x5206;&#x7EC4;&#x6807;&#x9898;&#x70B9;&#x51FB;&#x4E8B;&#x4EF6;
     * @param {Event} e &#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;
     * @memberof GroupList
     * @private
     * @return {void}
     * @instance
     */
    handleHeadingClick = e =&gt; {
        this.toggle();
    }

    /**
     * &#x68C0;&#x67E5;&#x662F;&#x5426;&#x5C55;&#x5F00;
     * @type {boolean}
     * @memberof GroupList
     * @instance
     */
    get isExpand() {
        return !this.props.forceCollapse &amp;&amp; this.state.expand;
    }

    /**
     * &#x5904;&#x7406;&#x8BF7;&#x6C42;&#x663E;&#x793A;&#x66F4;&#x591A;&#x5217;&#x8868;&#x9879;&#x4E8B;&#x4EF6;
     * @memberof GroupList
     * @private
     * @return {void}
     * @instance
     */
    handleRequestMorePage = () =&gt; {
        this.setState({page: this.state.page + 1});
    }

    /**
     * React &#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1A;Render
     * @private
     * @see https://doc.react-china.org/docs/react-component.html#render
     * @see https://doc.react-china.org/docs/rendering-elements.html
     * @memberof GroupList
     * @return {ReactNode}
     * @instance
     */
    render() {
        const {
            forceCollapse,
            headingCreator,
            hideEmptyGroup,
            checkIsGroup,
            itemCreator,
            group,
            toggleWithHeading,
            defaultExpand,
            expandIcon,
            collapseIcon,
            onExpandChange,
            className,
            children,
            startPageSize,
            morePageSize,
            defaultPage,
            ...other
        } = this.props;

        const {
            title,
            list,
            root,
        } = group;

        if (root) {
            return (
                &lt;div className={classes(&apos;app-group-list-root list&apos;, className)} {...other}&gt;
                    {GroupList.render(list, this.props, this.state.page, this.handleRequestMorePage)}
                &lt;/div&gt;
            );
        }

        const expand = this.isExpand;

        let headingView = null;
        if (headingCreator) {
            headingView = headingCreator(group, this);
        } else if (title) {
            if (React.isValidElement(title)) {
                headingView = title;
            } else if (typeof title === &apos;object&apos;) {
                headingView = &lt;Heading {...title} /&gt;;
            } else if (title) {
                const icon = expand ? expandIcon : collapseIcon;
                let iconView = null;
                if (icon) {
                    if (React.isValidElement(icon)) {
                        iconView = icon;
                    } else if (typeof icon === &apos;object&apos;) {
                        iconView = &lt;Icon {...icon} /&gt;;
                    } else {
                        iconView = &lt;Icon name={icon} /&gt;;
                    }
                }
                headingView = (
                    &lt;header onClick={toggleWithHeading ? this.handleHeadingClick : null} className=&quot;heading&quot;&gt;
                        {iconView}
                        &lt;div className=&quot;title&quot;&gt;{title}&lt;/div&gt;
                    &lt;/header&gt;
                );
            }
        }

        return (
            &lt;div
                className={classes(&apos;app-group-list list&apos;, className, {&apos;is-expand&apos;: expand, &apos;is-collapse&apos;: !expand})}
                {...other}
            &gt;
                {headingView}
                {expand &amp;&amp; list &amp;&amp; GroupList.render(list, this.props, this.state.page, this.handleRequestMorePage)}
                {children}
            &lt;/div&gt;
        );
    }
}
</code></pre>

</div>

<footer class="footer">
  Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>

<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>
